<template>
    <section class="index-search">
        <div class="container">
            <div class="left">
                <div class="left-logo">
                    <img src="./img/left-logo.png" alt="">
                </div>
                <div class="select-city">
                    徐州市<Icon type="ios-arrow-down" />
                </div>
            </div>
            <div class="center">
                <div class="search-input">
                    <div class="input-box">
                        <Icon class="icon" type="ios-search-outline" />
                        <input type="text" placeholder="请输入想要搜索的内容">
                        <span>搜索</span>
                    </div>
                </div>
                <div class="search-history">
                    <ul>
                        <li class="active">玻尿酸</li>
                        <li>双眼皮</li>
                        <li>瘦脸针</li>
                        <li>吸脂瘦身</li>
                        <li>水光针</li>
                        <li>假体隆鼻</li>
                        <li>吸脂</li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <img src="./img/right-logo.png" alt="">
            </div>
        </div>
    </section>
</template>

<script>
export default {
  name: 'IndexSearch',
  data () {
      return {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
    .index-search {
        background-color: #fff;
        padding: 30px 0 15px;
        .container {
            display: flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            .left {
                display: flex;
                padding-left: 10px;
                img {
                    display: inline-block;
                    vertical-align: middle;
                }
                .select-city {
                    cursor: pointer;
                    color: @theme-color-dark;
                    font-size: 20px;
                    width: 154px;
                    padding: 15px 10px 0
                }
            }
            .right {
                padding-right: 10px;
            }
            .center {
                padding: 0 40px 0 0;
                .input-box {
                    border: 1px solid @theme-color-dark;
                    border-radius: 50px;
                    width: 500px;
                    height: 40px;
                    color: @theme-color-dark;
                    font-size: 20px;
                    padding: 0 90px 0 40px;
                    position: relative;
                    input {
                        height: 38px;
                        border-color: transparent;
                        outline:none;
                        width: 100%;
                    }
                    .icon {
                        position: absolute;
                        left: 7px;
                        font-size: 30px;
                        top: 6px;
                    }
                    span {
                        position: absolute;
                        right: 0;
                        top: 4px;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 20px;
                        border-left: 1px solid @theme-color-dark;
                    }
                }
                .search-history {
                    padding: 15px 0 0;
                    ul {
                        list-style: none;
                        display: flex;
                        text-align: center;
                        li{
                            padding: 0 10px;
                            color: #898989;
                        }
                        li.active {
                            color: @theme-color-dark;
                        }
                    }
                }
            }
        }
    }
</style>
